@import "page-common";
@import "arow-part";

div.banner{
  @banner-height: 310px;
  margin-top: 20px;
  width: @client-page-width - (2 * 5px); height: @banner-height;
  padding: 0 5px;
  div.left-part{
    width: 400px - 5px;
    float: left;
    div.banner-img{

    }
  }
  div.right-part{
    float: left;
    width: 600px - 5px;
    div.banner-text-wrap{
      height: @banner-height - 70px;
      //background: #ff0000;
    }
    ul.banner-features{
      @ul-width: 600px - 5px;
      width: @ul-width;
      height: 70px;
      //border: 1px solid @base-blue-color;
      //background: darkorange;
      float: right;
      li.feature-item{
        float: left;
        @li-width: (@ul-width - ( (60px + (2 * 5px)) * 3));
        height: 60px;
        padding: 5px 5px;
        //width: 80px + (2 * 5px);
        //background: #ff0000;

        img{
          width: 60px; height: 60px;
          float: left;
          //background: #ffff00;

        }
        div.mask{
          //background: #0066cc;
          float: left;
          width: @li-width - 60px; height: 60px;
          overflow: hidden;
          width: 0px;
          p{
            width: @li-width - 60px - (2 * 10px); height: 60px - (2 * 5px); line-height: 18px;
            padding: 5px 10px;
            //background: #ff0000;
            font-family: @YaHei-font-family;
            font-size: 12px;

          }
        }
      }
    }
  }
}

div.arow-parts{
  font-family: @YaHei-font-family;
  div.arow{
    div.arow-part-header{
      margin: 20px 0;
      h2{
        font-size: 24px;
        font-weight: bold;
        margin: 10px 0;
        span.small{
          margin-left: 10px;
          font-size: 14px;
          color: #cccccc;
          font-weight: normal;
        }
      }
    }
    div.arow-part-body{
      padding: 0 10px;
      @body-width: @client-page-width - (10px * 2);
      ul.feature-items{
        clear: both;
        list-style: none;
        width: @body-width; height: 153px;
        padding: 0; margin: 0;

        li.msg-block{
          float: left;
          width: 235px;
          height: 153px;
          margin:0 5px;
          background:transparent url(../images/msg-block-bg.png) no-repeat center center;
          div.msg-warp{
            margin: 3px 5px 6px 5px;
            width: 235px - 10px;
            height: 153px - 3px - 5px;
            position: relative;
            overflow: hidden;
            div.msg-bg{
              position: absolute;
            }
            div.popup-block{
              position: absolute;
              bottom: -150px;
              background-color: rgba(60, 60, 60, 0.7);
              width: 225px;
              height: 180px;
              *background-color: #3c3c3c;
              *filter: e("alpha(opacity=70)");
              a{
                width: 225px - 10px;
                height: 30px;
                line-height: 30px;
                display: block;
                font-size: 12px;
                color: white;
                padding:0 5px;
                background-color: rgba(17, 110, 183, 0.5);
                text-align: center;
                *background-color: @base-blue-color;
                *filter: e("alpha(opacity=50)");
              }
              p{
                color: white;
                text-indent: 2em;
                padding: 14px 7px;
                font-size: 12px;
              }
            }
          }
        }
        li:first-child{
          margin-left: 0;
        }
        li:last-child{
          margin-right: 0;
        }
        li.feature-item{

        }
        li.no-margin-right{
          margin-right: 0;
        }
      }
      div#selectTab2{
        width: @body-width - 20px;
        border: 1px solid #cccccc;
        border-radius: 2px;
        ul.select-btn-group{
          li{
            border-right: 1px solid #cccccc;
          }
        }
        ul.select-content-panel{
          li{
            padding: 10px;
          }

        }
      }
      div#selectList1{

      }
    }
    div.arow-part-footer{
      margin-bottom: 40px;  //底部 距离， 让每一个 arow-part 都有距离
      height: 10px;
      background: #ffffff url(../images/arow-part-footer-bg.jpg) no-repeat left center;
    }
  }
}
.page-last-footer{
  margin-bottom: 252px;
}